<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css">
    <link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css">
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body >
<div class="content" >
    <h3 class="form-title">商品列表浏览</h3>
    <div class="table-responsive">
        <table class="table" >
            <thead>
                <tr>
                    <th>商品名</th>
                    <th>商品图片</th>
                    <th>商品描述</th>
                    <th>商品价格</th>
                    <th>商品库存</th>
                    <th>商品销量</th>
                </tr>
            </thead>
            <tbody id="container">

            </tbody>
        </table>
    </div>
</div>
</body>
<script>

    var g_itemList = [];

    jQuery(document).ready(function (){

         $.ajax({
             type:"GET",
             url:"http://localhost:8080/item/list",
             xhrFields:{withCredentials:true},
             success:function (data){
                 if(data.status=="success"){
                     g_itemList = data.data;
                     reloadDom();
                 }else{
                     alert("获取商品信息失败，原因为"+data.data.errMsg)
                 }
             },
             error:function (data) {
                 alert("获取商品信息失败，原因为"+data.responseText);
             }
         });
            
        
    });
    function reloadDom(){
        for(var i=0;i < g_itemList.length;i++){
            var itemVO = g_itemList[i];
            var dom = "<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'><td>"+itemVO.title+"</td><td><img style='width:100px;height:auto;' src='"+itemVO.imgUrl+"'/></td><td>"+itemVO.description+"</td><td>"+itemVO.price+"</td><td>"+itemVO.stock+"</td><td>"+itemVO.sales+"</td></tr>";
            $("#container").append($(dom));
            $("#itemDetail"+itemVO.id).on("click",function(e){
                window.location.href="getitem.html?id="+$(this).data("id");
            });
        }
        
    }
</script>
</html>